/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Grid, Input, Button, Select, DatePicker } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import {getDevice} from '../../../../api/index'
const { Row, Col } = Grid;

import DataBinder from '@icedesign/data-binder';

//
// @DataBinder({ // todo Databinder 与axios不能一起用
//   RecvDevice: { // SendData 是 key
//     url: '/api/getDevice',
//     method: 'post',
//     data: {       // todo 发送参数的格式
//     },
//     defaultBindingData: { // todo 这里是 接口返回数据的格式
//       status: 200,
//       statusText: 'ok',
//       data: []
//     }
//   }
// })

export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {},
      devResult:[]
    };
  }
  LoadDeviceData() {
    let pa = getDevice({})
    let data = [];
    pa.then(res => {
      if (res.data.status == 200) {
        data = res.data.data
        // let result = []
        console.log(data)
        const dataSource = data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.setState({
          dataSource
        });

        // return data
      } else {
        alert("/api/getDevice 接口出错")
      }
      // console.log(data)

    }).catch(err => {
      console.log(err)
      alert("/api/getDevice 接口出错" + err)
    });

    // console.log(data)

    // this.props.updateBindingData('RecvDevice');
  }

  componentWillMount() {
    this.LoadDeviceData()
  }

  formChange = (value) => { //todo
    // console.log('value', value);
    this.setState({
      value,
    });
    this.props.filterData(value);
  };


  render() {
    // console.log(this.props.bindingData)
    // this.LoadDeviceData() // todo 由于绑定FormBinderWrappe，一直调用 render（）
    // const dataSource = this.state.devResult
    // todo 后台获取数据，生成 下拉菜单项
    console.log(this.state.dataSource)

    return (
      <IceFormBinderWrapper  // todo 可能将下面表单的值，一起onchange，不需要单独
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="20" style={styles.formRow}>
          <Col l="8">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>年份：</span>
              <IceFormBinder triggerType="onBlur">
                <Select name="years" size="large" style={{ width: '200px' }}>
                  <Select.Option value="">全部</Select.Option>
                  <Select.Option value="2017">2017</Select.Option>
                  <Select.Option value="2018">2018</Select.Option>
                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="type" />
              </div>
            </div>
          </Col>
          <Col l="8">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>设备类型：</span>
              <IceFormBinder triggerType="onBlur">
                <Select name="deviceType" size="large" style={{ width: '200px' }}
                        dataSource={this.state.dataSource}
                >


                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="type" />
              </div>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formLabel: {
    minWidth: '70px',
  },
};
